<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>


            div{
                width:200px;
                height: 200px;

            }
            /*表示第一个字符,可以是中文字符*/
            .d1::first-letter{
                color:red;
            }

            /*表示第一行内容*/
            .d2::first-line{
                color:green;
            }

            /*表示选中的内容,选中的内容样式发生变化*/
            .d3::selection{
                color:white;
                background:#ccc;
            }

            /*
                在指定元素的前面添加内容，必须配合content样式
            */
            .p1::before{
                content:"我是花花";
                background:pink;
                font-size:30px;
            }

            /*
                在指定元素的后面添加内容，必须配合content样式
            */
            .p2::after{
                content:"我是末尾的呀";
                background:hotpink;
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <div class="d1">My name is 我是中国人，我多少度是的是的是多少大大大但是</div>
        <div class="d2">我是中国人，我多少度是的是的是多少大大大但是</div>
        <div class="d3">我是中国人，我多少度是的是的是多少大大大但是</div>
        <p class="p1">我是p1</p>
        <p class="p2">我是p2</p>
    </body>
</html>